// 导入必要的模块和函数
import el from '../utils/el'
import noteElement from './noteElement'
import restElement from './restElement'
import chordElement from './chordElement'
import multipartElement from './multipartElement'
import timeElement from './timeElement'
import directionElement from './directionElement'
import barElement from './barElement'
import box from './box'

/**
 * 生成 音符单元 格的 SVG 元素
 * @param {Object} cellLayout - 单元格的布局对象，包含数据布局和条布局
 * @returns {Array} - 包含 SVG 元素的数组
 */
export default function cellElement(cellLayout) {
  // 解构单元格布局对象中的属性
  const { dataLayout, shownLeftBarLayout,
          rightBarLayout, shownRightBarLayout } = cellLayout

  // 返回一个包含音符单元格元素的数组
  return el.create('g', [
    // 条件渲染左侧条
    shownLeftBarLayout ? barElement(shownLeftBarLayout) : [],

    // 遍历数据布局中的每个子布局，根据类型生成对应的元素
    dataLayout.layouts.map(layout => {
      // 根据布局类型选择对应的元素生成函数
      if ('note' in layout) return noteElement(layout)
      if ('rest' in layout) return restElement(layout)
      if ('chord' in layout) return chordElement(layout)
      if ('time' in layout) return timeElement(layout)
      if ('direction' in layout) return directionElement(layout)
      if ('multipart' in layout) return multipartElement(layout)
    }),

    // 条件渲染右侧条
    shownRightBarLayout ? barElement(shownRightBarLayout) :
                          barElement(rightBarLayout)
  ])
}
